<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">{{ item.name
            }}</el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute()
let breadcrumbList = ref([])

const initbreadcrumbList = () => {
    breadcrumbList.value = route.matched;
    console.log("=-894309", breadcrumbList)
}

watch(route, () => {
    initbreadcrumbList()
}, { deep: true, immediate: true })

</script>

<style lang="scss" scoped>
:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    font-size: 20px;
    display: flex;
    align-items: center;
}

:deep(.el-breadcrumb__inner) {
    font-size: 20px;
    display: flex;
    align-items: center;
}

:deep(.el-breadcrumb__separator) {
    font-size: 18px;
}
</style>